﻿@page
@model FytSoa.Web.Pages.FytAdmin.Shop.ColumnModel
@{
    ViewData["Title"] = "商品分类";
    Layout = AdminLayout.Pjax(HttpContext);
}
<div id="container">
    <link rel="stylesheet" href="~/themes/css/jquery.nestable.min.css" />
    <div id="app">
        <div class="list-wall">
            <div class="layui-form list-search" style="margin-top:10px;">
                <button type="button" class="layui-btn layui-btn-sm" data-type="toolstyle"><i class="layui-icon" :class="menustatus.open?'layui-icon-up':'layui-icon-down'"></i> {{menustatus.name}}</button>
                <button type="button" class="layui-btn layui-btn-sm" data-type="toolAdd"><i class="layui-icon layui-icon-add-circle-fine"></i> 添加新分类</button>
            </div>
        </div>
        <div class="dd">
            <item :list="list"></item>
            @*<ol class="dd-list">
                    <li class="dd-item" data-id="1">
                        <div class="dd-handle">Item 1</div>
                        <div class="pull-right">
                            <a href="#" class="layui-badge layui-bg-blue">显示</a>
                            <a href="#" title="添加子分类"><span><i class="layui-icon layui-icon-add-1"></i></span></a>
                            <a href="#" title="修改"><span><i class="layui-icon layui-icon-edit"></i></span></a>
                            <a href="#" title="删除"><span><i class="layui-icon layui-icon-delete"></i></span></a>
                        </div>
                    </li>
                    <li class="dd-item" data-id="2">
                        <div class="dd-handle">Item 2</div>
                    </li>
                    <li class="dd-item" data-id="3">
                        <div class="dd-handle">Item 3</div>
                        <ol class="dd-list">
                            <li class="dd-item" data-id="4">
                                <div class="dd-handle">Item 4</div>
                            </li>
                            <li class="dd-item" data-id="5">
                                <div class="dd-handle">Item 5</div>
                            </li>
                        </ol>
                    </li>
                </ol>*@
        </div>
    </div>
    <input type="hidden" id="isSave" value="0" />
    <script type="text/x-template" id="stree-template">
        <ol class="dd-list">
            <li class="dd-item" v-for="(item, index) in list" :key="index" :data-id="item.id">
                <div class="dd-handle">{{ item.name }}</div>
                <div class="pull-right">
                    <a :href="'javascript:active.show('+item.id+')'" class="layui-badge" :class="item.isshow?'layui-bg-blue':'layui-bg-gray'">{{item.isshow?'显示':'隐藏'}}</a>
                    <a :href="'javascript:active.goColumnModify(0,'+item.id+')'" title="添加子分类"><span><i class="layui-icon layui-icon-add-1"></i></span></a>
                    <a :href="'javascript:active.goColumnModify('+item.id+',0)'" title="修改"><span><i class="layui-icon layui-icon-edit"></i></span></a>
                    <a :href="'javascript:active.delete('+item.id+')'" title="删除"><span><i class="layui-icon layui-icon-delete"></i></span></a>
                </div>
                <item v-if="item.children.length>0" :list="item.children"></item>
            </li>
        </ol>
    </script>

    <script>
        Vue.component('item', {
            template: '#stree-template',
            props: {
                list: Array
            },
            data: function () {
                return {

                };
            }
        });

        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    list: [],
                    menustatus: {
                        open: true,
                        name: "折叠所有",
                        icon: "layui-icon-up"
                    }
                }
            },
            methods: {

            }
        });
        var active, layuiIndex;
        layui.config({
            base: '/themes/js/modules/'
        }).extend({
            iconPicker: 'nestable'
        }).use(['layer', 'jquery', 'common', 'nestable'], function () {
            var $ = layui.$,
                os = layui.common,
                nestable = layui.nestable;

            $(".dd").css({ height: $(window).height() - 170 });
            active = {
                init() {
                    os.ajax('api/shop/column/tree', { id: 2 }, function (res) {
                        if (res.statusCode === 200) {
                            vm.list = res.data;
                            vm.$nextTick(function () {
                                $('.dd').nestable({
                                    group: 1
                                }).on('change', function (e) {
                                    var list = e.length ? e : $(e.target);
                                    console.log(window.JSON.stringify(list.nestable('serialize')));
                                    active.sort(list.nestable('serialize'));
                                });
                            });
                        } else {
                            os.error(res.message);
                        }
                    });
                },
                toolAdd: function () {
                    active.goColumnModify();
                },
                toolstyle: function () {
                    if (vm.menustatus.open) {
                        $('.dd').nestable('collapseAll');
                        vm.menustatus.open = false;
                        vm.menustatus.name = "展开所有";
                        vm.menustatus.icon = "layui-icon-down";
                    }
                    else {
                        $('.dd').nestable('expandAll');
                        vm.menustatus.open = true;
                        vm.menustatus.name = "折叠所有";
                        vm.menustatus.icon = "layui-icon-up";
                    }
                },
                goColumnModify: function (id = 0, pid = 0) {
                    var winH = $(window).height(), winW = $(window).width();
                    layuiIndex = os.OpenRight('添加分类', "/fytadmin/shop/columnmodify?id=" + id + "&pid=" + pid, winW - 220 + 'px', winH - 61 + 'px', function () {
                        if (parseInt($("#isSave").val()) === 1) {
                            $("#isSave").val('0');
                            active.init();
                        }
                    }, function () {
                        active.closeCloumnModify();
                    });
                },
                closeCloumnModify: function () {
                    var $layero = $('#layui-layer' + layuiIndex);
                    $layero.animate({
                        left: $layero.offset().left + $layero.width()
                    }, 300, function () {
                        layer.close(layuiIndex);
                    });
                    return false;
                },
                show(id) {
                    os.ajax('api/shop/column/show/', { id: id }, function (res) {
                        if (res.statusCode === 200) {
                            active.init();
                        } else {
                            os.error(res.message);
                        }
                    });
                },
                delete(id) {
                    layer.confirm('确定要执行批量删除吗？', function (index) {
                        layer.close(index);
                        var loadindex = layer.load(1, {
                            shade: [0.1, '#000']
                        });
                        os.ajax('api/shop/column/delete/', { id: id }, function (res) {
                            layer.close(loadindex);
                            if (res.statusCode === 200) {
                                active.init();
                                os.success('删除成功！');
                            } else {
                                os.error(res.message);
                            }
                        });
                    });
                },
                sort(param){
                    console.log(param);
                    os.ajax('api/shop/column/sort/', param, function (res) {
                        if (res.statusCode === 200) {
                            os.success('排序成功~');
                        } else {
                            os.error(res.message);
                        }
                    });
                }
            };
            active.init();
            $('.list-search .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</div>